<template>
	<view class="top">
		<view class="name">
			<image src="../../static/darling1.jpg" mode="aspectFill" class="profile_picture"></image>
			<text style="width: 65vw;">{{user_data.Telephone}}</text>
			<image src="../../static/icons/右.png" mode="aspectFill" class="right"></image>
		</view>
	</view>
	<view class="box">
		<view v-for="item in boxs" :key="item.id" class="boxs">
			<image :src=item.img mode="aspectFit" class="imgs"></image>
			<text style="font-size: 14px;">{{item.text}}</text>
		</view>
	</view>
	<view class="content">
		<uni-list class="uni_list" :border="false">
			<uni-list-item @click="myclick" v-for="item in slot1" :key="item.id" showArrow link :to="item.url">
				<template v-slot:body>
					<image :src="item.img" class="list_image"></image>
					<text class="slot-box slot-text">{{item.text}}</text>
				</template>
			</uni-list-item>
		</uni-list>
	</view>
	<view class="content">
		<uni-list class="uni_list" :border="false">
			<uni-list-item v-for="item in slot2" :key="item.id" showArrow link :to="item.url">
				<template v-slot:body>
					<image :src="item.img" class="list_image"></image>
					<text class="slot-box slot-text">{{item.text}}</text>
				</template>
			</uni-list-item>
		</uni-list>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const boxs = ref([{
		id: '1',
		text: '立减套餐',
		img: '../../static/box/套餐.png'
	}, {
		id: '2',
		text: '购物车',
		img: '../../static/box/购物车.png'
	}, {
		id: '3',
		text: '商城订单',
		img: '../../static/box/订单.png'
	}, {
		id: '4',
		text: '领券中心',
		img: '../../static/box/领券.png'
	}])
	const slot = ref([{
		id: '1',
		text: '消费记录',
		img: '../../static/slot/消费记录.png',
		url: '../recharge_record/recharge_record'
	}, {
		id: '2',
		text: '充值记录',
		img: '../../static/slot/充值记录.png',
		url: '../recharge_record/recharge_record'
	}, {
		id: '3',
		text: '我的赠送话费',
		img: '../../static/slot/礼物赠送.png',
		url: '../phone_bill/phone_bill'
	}, {
		id: '4',
		text: '联系客服',
		img: '../../static/slot/客服.png',
		url: '../customer_service/customer_service'
	}, {
		id: '5',
		text: '收货地址',
		img: '../../static/slot/地址.png',
		url: '../detail/detail'
	}, {
		id: '6',
		text: '公告列表',
		img: '../../static/slot/公告.png',
		url: '../detail/detail'
	}, {
		id: '7',
		text: '设置',
		img: '../../static/slot/设置.png',
		url: '../detail/detail'
	}])
	const slot1 = ref(slot.value.slice(0, 3));
	const slot2 = ref(slot.value.slice(3, 8));
	const myclick = function(event) {
		console.log(event)
	}
	
	const user_data = ref({
		Telephone: '98989898989',//电话号码
		Number: '12345678910',//充值号
		Used_traffic: '128',//已用流量
		Remaining_traffic: '128',//剩余流量
		Balance: '0',//卡余额
		Days_remaining: '2',//剩余天数
	})
</script>

<style lang="scss" scoped>
	.top {
		background-color: #408BF5;
		width: 100vw;
		height: 25vh;
		margin-bottom: 10vh;
		border-radius: 0 0 20px 20px;
	}

	.name {
		padding: 40px 20px;
		display: flex;
		align-items: center;

		text {
			margin-left: 10px;
			font-size: 20px;
			color: #F8F8F8;
		}
	}

	.profile_picture {
		width: 15vw;
		height: 15vw;
		border-radius: 50%;
	}

	.right {
		width: 8vw;
		height: 8vw;
	}

	.box {
		width: 90vw;
		display: flex;
		background-color: #ffffff;
		border-radius: 10px;
		box-shadow: 0px 1px 5px #b4b4b4;
		margin: 5vw;
		display: flex;
		justify-content: center;
		align-items: center;
		position: absolute;
		top: 30vw;
	}

	.boxs {
		width: 23vw;
		height: 20vw;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.imgs {
		width: 8vw;
		height: 8vw;
	}

	.content {
		width: 90vw;
		height: 10;
		margin: 5vw;
		border-radius: 10px;
		box-shadow: 0px 1px 5px #b4b4b4;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.uni_list {
		width: 86vw;
		margin: 0 2vw;
		border-radius: 10px;
	}

	.list_image {
		width: 22px;
		height: 22px;
		margin-right: 10px;
	}
</style>